<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border 三角形</title>
</head>
<body>
	<style type="text/css">
		.border-trg-1{
			border: 50px solid;
			border-color:red transparent transparent;
		}
		.border-trg-2{
			border-width: 10px 20px;
			border-style: solid;
			border-color: red red transparent transparent;
		}
		.trg{
			width:0px;
		}
		.btn-trg:before,.btn-trg:after{
			content:"";
			display: block;
			border-width:2px;
			border-style:solid;
			float:left;
			width:97%;
		}
		.btn-trg:before{
			margin-top: -15px;
			border-color:transparent transparent red;
		}
		.btn-trg:after{
			margin-top: 12px;
			border-color:red transparent transparent ;
		}
		.btn-trg{
			width:120px;
			height:32px;
			background-color:#333;
			color:#fff;
			margin-top: 30px;
			line-height:32px;
			text-align: center;
			font-size: 14px;
		}
	</style>

	<div class="trg border-trg-1"></div>
	<div class="trg border-trg-2"></div>

	<div class="btn-trg">我是按钮</div>
</body>
</html>


